<template>
    <div class="page">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="区域代码">
                        <el-input v-model="searchForm.areaCode" placeholder="请输入区域代码" />
                    </el-form-item>
                    <el-form-item label="区域名称">
                        <el-input v-model="searchForm.areaCode" placeholder="请输入区域名称" />
                    </el-form-item>
                    <el-form-item >
                        <el-button @click="doSearch">搜索</el-button>
                        <el-button type="primary" @click="doAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row v-loading="loading" >
            <el-col :span="24">
                <el-table :data="tableData">
                    <el-table-column align="center" label="区域类型">
                        <template #default="scope">
                            <el-tag v-if="scope.row.areaType === 'CUSTOM'">自定义</el-tag>
                            <el-tag v-if="scope.row.areaType === 'GOV'">国家行政区域</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="areaCode" align="center" label="区域代码" />
                    <el-table-column prop="areaName" align="center" label="区域名称"/>
                    <el-table-column fixed="right" label="操作" align="center" width="120">
                        <template #default="scope">
                             <el-button type="primary" link @click="openQr(scope.row)">注册码</el-button>
                             <el-button type="primary" link @click="doEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="page-row">
                    <el-pagination background layout="prev, pager, next" :total="page.total" :current="page.current" :page-size="page.size" @change="changePage"/>
                </div>
            </el-col>
        </el-row>
        <el-dialog v-model="showQr" :title="detailData?.areaName + '注册码'" width="500" @closed="closeQr" >
            <div class="qr-image-box">
                <el-image class="image" :src="detailData?.registerIcon" />
            </div>
        </el-dialog>
        <AreaEdit v-model:show="showEdit" :detail-data="detailData" @close="closeEdit"/>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAreaStore } from '../../../store/area'
import AreaEdit from './AreaEdit.vue'
import { ElMessage } from 'element-plus'

const areaStore = useAreaStore()
const searchForm = ref({
    areaCode: '',
    areaName: '',
});
const tableData = ref([])
const page = ref({
    current: 1,
    size: 10,
    total: 0
})
const loading = ref(true)
let searchData = {
    areaCode: '',
    areaName: ''
}
const showEdit = ref(false)
const detailData = ref<any>()
const showQr = ref(false)
onMounted(() => {
    getList()
})
function doSearch() {
    searchData = {...searchForm.value}
    page.value.current = 1
    getList()
}
function changePage(current: number) {
    page.value.current = current
    getList()
}
function getList() {
    loading.value = true
    areaStore.getAreaPage({
        current: page.value.current,
        size: page.value.size,
        areaCode: searchData.areaCode,
        areaName: searchData.areaName
    }).then(res => {
        if (res.code === 't_200') {
            let obj = {...res.obj || {}}
            let list = obj.records
            tableData.value = list
            page.value = {
                current: obj.current,
                size: obj.size,
                total: obj.total
            }
        } else {
            ElMessage.error(res.msg)
        }
    }).catch(() => {
        ElMessage.error("请求失败")
    }).finally(() => {
        loading.value = false
    })
}
function doAdd() {
    detailData.value = {}
    showEdit.value = true
}
function doEdit(row:any) {
    detailData.value = {...row}
    showEdit.value = true
}
function closeEdit() {
    getList()
}
function openQr(row:any) {
    detailData.value = row
    showQr.value = true
}
function closeQr() {
    showQr.value = false
    detailData.value = {}
}
</script>
<style lang="scss" scoped>
.page{
    position: relative;
    .page-row{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }
    .qr-image-box{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        .image{
            width: 150px;
            height: 150px;
        }
    }
}
</style>